<template>
	<view class="page-container">
		<!-- 信息录入区 -->
		<view class="info-section">
			<u-cell-group>
				<!-- 循环渲染基础信息 -->
				<u-cell :title="item.label" :value="info[item.prop]" v-for="(item, index) in formList" :key="item.prop"
					:required="item.required">
					<template slot="value">
						<view v-if="item.type!=='dict'">
							{{info[item.prop]}}
						</view>
						<view v-else>
							<dicts-tag :list="dictList[item.dictType]" :value="info[item.prop]"></dicts-tag>
						</view>
					</template>
				</u-cell>

			</u-cell-group>
		</view>


		<view class="tempbox">
			<uni-section class="mb-10" title="阶段列表" type="line" titleFontSize="16px">

				<u-collapse>
					<u-collapse-item v-for="item in info.stepList"
						:title="`${item.stepName}(${item.detailList.length})`" :value="item.stepCode"
						:name="item.stepId">
						<view class="itembox" v-for="c_item in item.detailList" :key="c_item.itemId"
							@click="getFormPage(c_item)">
							<view class="itembox_l">
								<view class="itembox_label" v-for="l_item in itemLabel">
									<text class="itembox_label_left">{{l_item.label}}：</text>
									<text
										class="itembox_label_right">{{c_item[l_item.prop] === null ? '---'  : c_item[l_item.prop] }}</text>
								</view>
								<view class="itembox_label">
									<text class="itembox_label_left">检查状态：</text>
									<text class="itembox_label_right">
										<text>{{checkType[c_item['frequencyType']]}}</text>

										<!-- <text v-if="c_item['frequencyType'] == '1'">∞</text> -->
										<text v-if="c_item['frequencyType'] == '2'"> {{c_item['fillCount'] || 0}} /
											{{c_item['frequency']}}</text>
										<text v-if="c_item['frequencyType'] == '3'"> {{c_item['fillCount'] || 0}} /
											1</text>



									</text>
								</view>
							</view>
							<!-- <u-icon name="arrow-right-double" :color="c_item.checkStatus ?  '#2979ff' : '#fa3534'"
								size="24"></u-icon> -->
							<u-icon v-if="c_item.checkStatus" name="arrow-right-double" color="#2979ff"
								size="24"></u-icon>
							<text v-else style="color: #fa3534;flex-shrink: 0;">已完成</text>
						</view>
					</u-collapse-item>
				</u-collapse>
			</uni-section>
		</view>


		<!-- <u-popup closeable  mode="right" :show="show" @close="close" @open="open">
			<view class="popbox">
				<view class="popbox_title">
					问题列表
				</view>
			</view>
		</u-popup> -->

		<bottom-button v-if="info.productStatus == 1" @click="handleAllSuccess" text="完成"></bottom-button>
	</view>
</template>

<script>
	import {
		getDicts,
		getProductServiceById,
		completeTask,
		getFileList,
		completeWorkOrder
	} from "@/common/api.js"
	import config from "@/common/config.js"
	import bottomButton from "@/components/bottomButton.vue";
	import fileUpload from "@/components/fileUpload.vue";
	import dictsTag from "@/components/dictsTag.vue"
	import dicts from '@/mixins/dicts.js'
	export default {
		mixins: [dicts],
		components: {
			bottomButton,
			fileUpload,
			dictsTag
		},
		data() {
			return {
				checkType: {
					'1': '循环',
					'2': '多次',
					'3': '单次',
				},
				itemLabel: [{
						label: "检查确认点",
						prop: "detailName"
					},
					{
						label: "对象",
						prop: "detailObject"
					},
					{
						label: "工艺要点",
						prop: "method"
					},
					{
						label: "字段确认",
						prop: "fieldConfirm"
					},
					{
						label: "检查手段",
						prop: "checkWay"
					},
					// {
					// 	label: "确认方式",
					// 	prop: "methodExplain"
					// },
					// {
					// 	label: "应检次数",
					// 	prop: "frequency"
					// },
					// {
					// 	label: "已检次数",
					// 	prop: "fillCount"
					// },
				],
				formData: {}, // 存储表单数据，替代原硬编码的“11”
				formList: [{
						label: '项目编号',
						prop: 'projectNo',
						type: 'text',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					},
					{
						label: '工号',
						prop: 'productNo',
						type: 'select',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					},
					{
						label: '项目名称',
						prop: 'projectName',
						type: 'select',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					},
					{
						label: '产品类型',
						prop: 'productType',
						type: 'dict',
						status: 'normal',
						required: true,
						dictType: 'service_product_type',
						url: '/pages/product/index'
					},
					{
						label: '型号',
						prop: 'model',
						type: 'select',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					},
					{
						label: '模板名称',
						prop: 'templateName',
						type: 'text',
						status: 'normal',
						required: true,
						dictType: 'service_voltage_type',
						url: '/pages/product/index'
					},
					// {
					// 	label: '备注',
					// 	prop: 'remark',
					// 	type: 'textarea',
					// 	status: 'normal',
					// 	required: true
					// },
					{
						label: '安排日期',
						prop: 'createTime',
						type: 'text',
						status: 'normal',
						required: true
					},
					{
						label: '安排人',
						prop: 'projectLeaderName',
						type: 'text',
						status: 'normal',
						required: true
					},


				],

				info: {
					stepList: []
				},
				productId: '',
				baseFileUrl: config.baseFileUrl,
				imgList: [],
				type: '', // 页面类型
				disabled: false,
				imageList: [],
				fileList: [],
				dictList: {},
				show: true,
				rules: {
					process: [{
						required: true,
						message: '请输入处理过程',
						trigger: ['blur', 'change']
					}],
					result: [{
						required: true,
						message: '请输入处理结果',
						trigger: ['blur', 'change']
					}],
					taskSolveDate: [{
						required: true,
						message: '请选择解决时间',
						trigger: ['blur', 'change']
					}],
					imgIds: {
						type: 'array',
						required: true,
						min: 1,
						message: '请上传附件',
						trigger: ['change']
					},
				},
				completionInfo: {
					taskSolveDate: '', // 解决时间
					result: '', // 处理结果
					process: '', // 处理过程
					imgIds: "",
				}
			};
		},
		onLoad(e) {
			this.productId = e.productId || ''
			this.type = e.type || ''
			this.disabled = e.type == 2 ? true : false

			this.getDictsList('service_product_type')
			this.getDictsList('service_voltage_type')
			this.getDictsList('service_project_task_problem')

		},
		onShow() {
			this.getInfo()
		},
		onReady() {
			if (this.type == 2)
				uni.setNavigationBarTitle({
					title: '详情'
				})
		},
		methods: {

			allCheckStatusFalse() {
				// 遍历外层的 stepList
				for (const item of this.info.stepList) {
					// 遍历内层的 detailList
					for (const i_item of item.detailList) {
						// 只关注 frequencyType 为 2 或 3 的项
						if (['2', '3'].includes(i_item.frequencyType)) {
							// 只要有一个符合条件的项 checkStatus 为 true，就返回 false
							if (i_item.checkStatus) {
								return false;
							}
						}
					}
				}
				// 所有符合条件的项 checkStatus 都为 false，返回 true
				return true;
			},
			handleAllSuccess() {
				let that = this

				if (!this.allCheckStatusFalse()) return this.$commonFn.msg('请完成所有阶段任务的检测提交')

				uni.showModal({
					title: '提示',
					content: '确认是否提交',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '数据提交中',
								mask: true
							});
							completeWorkOrder({
								productId: that.productId,
								productStatus: 2
							}).then(res => {
								if (res.code == '00000') {
									that.$commonFn.msg('提交成功')
									setTimeout(() => {
										that.$commonFn.Navback()
									}, 1000);
								}
							}).catch(err => {
								// console.log(err,'err')
								uni.hideLoading();
							})
						}
					}
				});


				// if(allCheckStatusFalse){

				// }
			},
			async getInfo() {
				let that = this
				let res = await getProductServiceById({
					productId: this.productId
				})
				if (res.code == '00000') {
					this.info = res.data
					// this.result = res.data.result
					// this.getFile('task_problem_info_file')
					// this.getFile('task_info_file')

				}
			},
			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data
				}
			},
			updataImage(e) {
				this.completionInfo.imgIds = e;
				this.$refs.uForm.validateField('imgIds')
			},
			handleSubmit() {
				let that = this

				this.$refs.uForm.validate().then(res => {
					let params = JSON.parse(JSON.stringify(that.completionInfo))
					params['task_info_file'] = params['imgIds'].map(item => item.fileId).join(',')
					// params['bizType'] = 'task_info_file'
					params = {
						...this.info,
						...params,
					}
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					completeTask(JSON.stringify(params), {
						header: {
							'Content-Type': 'application/json'
						}

					}).then(ord => {
						this.$commonFn.msg('提交成功')
						this.getInfo()
						uni.hideLoading()
						this.show = false
						setTimeout(() => {
							that.$commonFn.Navback()
						}, 500);
					}).catch(err => {
						uni.hideLoading()
					})
				}).catch(errors => {
					uni.hideLoading()
					console.log(errors, 'errors')
				})
			},
			open() {

			},
			close() {
				this.show = false
			},
			async getFile(type) {
				let res = await getFileList({
					bizType: type,
					bizId: this.taskId
				})
				if (res.data) {

					if (type == 'task_problem_info_file') {
						this.fileList = res.data.map(item => {
							return {
								...item,
								url: config.baseFileUrl + item.fileId,
								name: item.fileName,
							}
						})
					} else {
						this.imageList = res.data.map(item => {
							return {
								...item,
								url: config.baseFileUrl + item.fileId,
								name: item.fileName,
							}
						})
					}


				}
			},
			getFormPage(item) {

				let itemInfo = encodeURIComponent(JSON.stringify(item))
				this.$commonFn.Navto(
					`./itemForm?item=${itemInfo}`)
				// this.$commonFn.Navto(
				// 	`./itemForm?taskId=${item.taskId}&checkStatus=${item.checkStatus}&productId=${this.productId}`)
			},
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .tempbox .u-cell__title-text {
		color: #3c9cff;
	}

	.itembox {
		padding: 12px 0;
		border-bottom: 1px solid #f3f4f6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&:last-child {
			border-bottom: none;
		}

		&_l {
			padding-right: 10rpx;
		}

		&_label {
			margin-bottom: 10px;
			display: flex;

			&_left {
				width: 180rpx;
				padding-right: 12rpx;
				flex-shrink: 0;
			}

			&_right {
				display: -webkit-box;
				/* 弹性盒模型，用于配合 line-clamp */
				-webkit-box-orient: vertical;
				/* 垂直排列文本 */
				-webkit-line-clamp: 2;
				/* 限制显示的行数 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号（可选，增强兼容性） */
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}


	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.question-title-item {
		color: #909193;
		background-color: #f3f4f6;
		padding: 15px;
		font-size: 15px
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 15px;
		margin-bottom: 12rpx;
		color: #000;

	}

	.info-section {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.question-section {
		background-color: #fff;

		.question-title {
			line-height: 42px;
			text-align: center;
			background-color: #3c9cff;
			color: #fff;
			font-size: 16px;
		}

		&-btn {
			// padding-top: 24rpx;
		}
	}

	// 修复文本对齐问题
	::v-deep {

		.uni-textarea-textarea,
		.uni-textarea-placeholder,
		.u-form-item__body__right__message,
		.u-textarea__field {
			// text-align: right !important;
		}

		.u-cell__body {
			justify-content: space-between;
		}

		.u-cell__body__content {
			flex-shrink: 1;
			padding-right: 10px;
			flex: 1;
			min-width: 150rpx;
		}

		.u-cell__value {
			word-break: break-all;

		}
	}

	.popbox {
		width: 698rpx;
		padding: 24rpx;
		padding-top: 32rpx;
		border-radius: 12rpx;

		&_title {
			text-align: center;
			padding-bottom: 24rpx;
		}

		&_content {
			padding-bottom: 24rpx;
		}
	}
</style>